<template>
  <div class="pageBox">
    <div id="svgBox" ref="svgBox">
      <div id="main" ref="main"></div>
      <div id="svgDom" ref="svgDom"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SVG } from '@svgdotjs/svg.js'
import svgUrl from '@/assets/svg/demo.svg'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
let svgBox = ref<HTMLElement | null>(null)

let main = ref<HTMLElement | null>(null)
let draw = ref(null as any)

let svgDom = ref<HTMLElement | null>(null)
let svgDraw = ref<any>(null)

// 定义大屏缩放比例
const getScale = (w = 1920, h = 1080) => {
  // 例子 原型搞为1920(4) 屏幕2269 (8)  放大缩小的比例 宽度
  const ww = window.innerWidth / w
  // 例子 原型搞为1080(3) 屏幕2160 (6)  放大缩小的比例 高度
  const wh = window.innerHeight / h
  // 函数返回宽度缩放比例ww和高度缩放比例wh中较小的那个值，这是因为它希望保持宽高比例不变，
  // 选择较小的比例来进行缩放，以确保整个内容可以在屏幕内完整显示。
  return ww < wh ? ww : wh
  // ww宽度小于wh 高度：（视口宽度变小，视口高度变大）
}

const svgFun = async () => {
  draw.value = SVG()
  main.value = document.getElementById('main')
  draw.value.addTo(main.value as HTMLElement)
  draw.value.size('100%', '100%')
  let image = draw.value.image(svgUrl)
  image.size('100%', '100%')
}

const svgDomFun = () => {
  svgDraw.value = SVG()
  svgDom.value = document.getElementById('svgDom')
  svgDraw.value.addTo(svgDom.value)
  svgDraw.value.size('100%', '100%')
  // 组
  let startGroup = svgDraw.value.group()
  // 绘制矩形
  let startRect = svgDraw.value
    .rect(100, 50)
    .move(20, 20)
    .radius(20)
    .fill('#fc9c9c')
  // 绘制文字
  let startText = svgDraw.value
    .text('START')
    .move(45, 38)
    .font({ fill: '#fff', size: 16, weight: 'bold' })
  // 将矩形添加到组
  startGroup.add(startRect)
  // 将文字添加到组
  startGroup.add(startText)
}

// 监听窗口变化
window.addEventListener('resize', () => {
  ;(svgBox.value as HTMLElement).style.transform =
    `scale(${getScale()}) translate(-50%,-50%)`
})

onMounted(() => {
  ;(svgBox.value as HTMLElement).style.transform =
    `scale(${getScale()}) translate(-50%,-50%)`
  svgFun()
  svgDomFun()
})

onUnmounted(() => {
  window.removeEventListener('resize', () => {})
})
</script>

<style scoped lang="scss">
.pageBox {
  width: 100vw;
  height: 100vh;
  background-color: #f1f1e9;

  #svgBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    background-color: #fff000;

    #main {
      width: 865px;
      height: 427px;
    }

    #svgDom {
      width: 865px;
      height: 427px;
      background-color: #f1f1e9;
    }
  }
}
</style>
